<!doctype html>
<html lang="zh-CN">
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>前后分离之前端总结 | Jeremy Sze的博客</title>
    <meta property="og:title" content="前后分离之前端总结 - Jeremy Sze的博客">
    <meta property="og:type" content="article">
        
    <meta property="article:published_time" content='2018-12-06T08:36:54&#43;08:00'>
        
        
    <meta property="article:modified_time" content='2018-12-06T08:36:54&#43;08:00'>
        
    <meta name="Keywords" content="java,博客">
    <meta name="description" content="前后分离之前端总结">
        
    <meta name="author" content="Jeremy Sze">
    <meta property="og:url" content="https://laoer123.gitee.io/laoer123/post/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E4%B9%8B%E5%89%8D%E7%AB%AF%E6%80%BB%E7%BB%93/">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

    <link rel="stylesheet" href='/laoer123/css/normalize.css'>
    <link rel="stylesheet" href='/laoer123/css/style.css'>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({
        google_ad_client: "ca-pub-4031353640611810",
        enable_page_level_ads: true
    });
    </script>
    


    
    
        <link rel="stylesheet" href='/laoer123/css/douban.css'>
    
        <link rel="stylesheet" href='/laoer123/css/other.css'>
    
</head>


<body>
    <header id="header" class="clearfix">
    <div class="container">
        <div class="col-group">
            <div class="site-name ">
                
                    <a id="logo" href="https://laoer123.gitee.io/laoer123">
                        Jeremy Sze的博客
                    </a>
                
                <p class="description">专注于Java、JavaScript、软件开发、web开发、分布式，微服务系统开发</p>
            </div>
            <div>
                <nav id="nav-menu" class="clearfix">
                    <a class="current" href="https://laoer123.gitee.io/laoer123">首页</a>
                    
                    <a  href="https://laoer123.gitee.io/laoer123/about/" title="关于">关于</a>
                    
                </nav>
            </div>
        </div>
    </div>
</header>

    <div id="body">
        <div class="container">
            <div class="col-group">

                <div class="col-8" id="main">
                    
<div class="res-cons">
    <style type="text/css">
    .post-toc {
        position: fixed;
        width: 200px;
        margin-left: -210px;
        padding: 5px 10px;
        font-family: Athelas, STHeiti, Microsoft Yahei, serif;
        font-size: 12px;
        border: 1px solid rgba(0, 0, 0, .07);
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 0.98);
        background-clip: padding-box;
        -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .125);
        box-shadow: 1px 1px 2px rgba(0, 0, 0, .125);
        word-wrap: break-word;
        white-space: nowrap;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        z-index: 999;
        cursor: pointer;
        max-height: 70%;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .post-toc .post-toc-title {
        width: 100%;
        margin: 0 auto;
        font-size: 20px;
        font-weight: 400;
        text-transform: uppercase;
        text-align: center;
    }

    .post-toc .post-toc-content {
        font-size: 15px;
    }

    .post-toc .post-toc-content>nav>ul {
        margin: 10px 0;
    }

    .post-toc .post-toc-content ul {
        padding-left: 20px;
        list-style: square;
        margin: 0.5em;
        line-height: 1.8em;
    }

    .post-toc .post-toc-content ul ul {
        padding-left: 15px;
        display: none;
    }

    @media print,
    screen and (max-width:1057px) {
        .post-toc {
            display: none;
        }
    }
</style>
<div class="post-toc" style="position: absolute; top: 188px;">
    <h2 class="post-toc-title">文章目录</h2>
    <div class="post-toc-content">
        <nav id="TableOfContents">
  <ul>
    <li><a href="#理解前后端分离开发">理解前后端分离开发</a>
      <ul>
        <li><a href="#老的方式是">老的方式是：</a></li>
        <li><a href="#新的方式是">新的方式是：</a></li>
      </ul>
    </li>
    <li><a href="#什么是nodejs">什么是Node.js</a>
      <ul>
        <li><a href="#nodejs安装">Node.js安装</a></li>
        <li><a href="#包资源管理器npm">包资源管理器NPM</a></li>
      </ul>
    </li>
    <li><a href="#什么是npm">什么是NPM</a></li>
    <li><a href="#npm命令">NPM命令</a>
      <ul>
        <li><a href="#初始化工程">初始化工程</a></li>
        <li><a href="#本地安装">本地安装</a></li>
        <li><a href="#全局安装">全局安装</a></li>
        <li><a href="#批量下载">批量下载</a></li>
        <li><a href="#淘宝npm镜像">淘宝NPM镜像</a></li>
        <li><a href="#运行工程">运行工程</a></li>
        <li><a href="#编译工程">编译工程</a></li>
      </ul>
    </li>
    <li><a href="#什么是es6">什么是ES6</a>
      <ul>
        <li><a href="#nodejs使用es6">nodejs使用es6</a></li>
      </ul>
    </li>
    <li><a href="#语法新特性">语法新特性</a>
      <ul>
        <li><a href="#变量声明let">变量声明let</a></li>
        <li><a href="#常量声明">常量声明</a></li>
        <li><a href="#模板字符串">模板字符串</a></li>
        <li><a href="#函数默认参数">函数默认参数</a></li>
        <li><a href="#箭头函数">箭头函数</a></li>
        <li><a href="#对象初始化简写">对象初始化简写</a></li>
        <li><a href="#解构">解构</a></li>
        <li><a href="#spread-operator">Spread Operator</a></li>
        <li><a href="#import-和-export">import 和 export</a></li>
      </ul>
    </li>
    <li><a href="#什么是elementui">什么是ElementUI</a>
      <ul>
        <li><a href="#快速搭建">快速搭建</a></li>
      </ul>
    </li>
    <li><a href="#了解工程结构">了解工程结构</a></li>
    <li><a href="#项目初始化">项目初始化</a>
      <ul>
        <li><a href="#关闭语法规范性检查">关闭语法规范性检查</a></li>
        <li><a href="#国际化设置">国际化设置</a></li>
        <li><a href="#与easy-mock对接">与easy-mock对接</a></li>
        <li><a href="#更改标题与菜单">更改标题与菜单</a></li>
      </ul>
    </li>
  </ul>
</nav>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        var postToc = $(".post-toc");
        if (postToc.length) {
            var leftPos = $("#main").offset().left;
            if(leftPos<220){
                postToc.css({"width":leftPos-10,"margin-left":(0-leftPos)})
            }

            var t = postToc.offset().top - 20,
                a = {
                    start: {
                        position: "absolute",
                        top: t
                    },
                    process: {
                        position: "fixed",
                        top: 20
                    },
                };
            $(window).scroll(function () {
                var e = $(window).scrollTop();
                e < t ? postToc.css(a.start) : postToc.css(a.process)
            })
        }
    })
</script>
    <article class="post">
        <header>
            <h1 class="post-title">前后分离之前端总结</h1>
        </header>
        <date class="post-meta meta-date">
            2018年12月6日
        </date>
        
        <div class="post-meta">
            <span>|</span>
            
            <span class="meta-category"><a href='https://laoer123.gitee.io/categories/%E5%89%8D%E7%AB%AF%E5%BE%AE%E6%9C%8D%E5%8A%A1'>前端微服务</a></span>
            
        </div>
        
        
        <div class="post-meta">
            <span id="busuanzi_container_page_pv">|<span id="busuanzi_value_page_pv"></span><span>
                    阅读</span></span>
        </div>
        
        
        <div class="post-content">
            <h2 id="理解前后端分离开发">理解前后端分离开发</h2>
<p>  前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。</p>
<h3 id="老的方式是">老的方式是：</h3>
<ol>
<li>产品经理/领导/客户提出需求</li>
<li>UI做出设计图</li>
<li>前端工程师做html页面</li>
<li>后端工程师将html页面套成jsp页面
$\color{green}{前后端强依赖，后端必须要等前端的html做好才能套jsp。如果html发生变更，就更痛了，开发效率低}$</li>
<li>集成出现问题</li>
<li>前端返工</li>
<li>后端返工</li>
<li>二次集成</li>
<li>集成成功</li>
<li>交付</li>
</ol>
<h3 id="新的方式是">新的方式是：</h3>
<ol>
<li>产品经理/领导/客户提出需求</li>
<li>UI做出设计图</li>
<li>前后端约定接口&amp;数据&amp;参数</li>
<li>前后端并行开发
$\color{green}{无强依赖，可前后端并行开发，如果需求变更，只要接口和参数不变，就不用两边都修改代码，开发效率高}$</li>
<li>前后端集成</li>
<li>前端页面调整</li>
<li>集成成功</li>
<li>交付
<img src="/img/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB.png" alt="alt 前后端分离">
<img src="/img/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E6%A0%88.png" alt="alt 前端技术栈">
$\color{red}{架构描述：以Node.js为核心的Vue.js前端技术生态架构}$</li>
</ol>
<h2 id="什么是nodejs">什么是Node.js</h2>
<p>简单的说 Node.js 就是运行在服务端的 JavaScript。<br>
Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。<br>
Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。</p>
<h3 id="nodejs安装">Node.js安装</h3>
<p>下载对应你系统的Node.js版本:<br>
<a href="https://nodejs.org/en/download/">https://nodejs.org/en/download/</a><br>
选安装目录进行安装<br>
点击下一步…下一步…默认安装即可<br>
测试<br>
在命令提示符下输入命令</p>
<pre><code>node -v
</code></pre><p>会显示当前node的版本</p>
<h3 id="包资源管理器npm">包资源管理器NPM</h3>
<h2 id="什么是npm">什么是NPM</h2>
<p>  npm全称Node Package Manager，他是node包管理和分发工具。<br>
$\color{red}{其实我们可以把NPM理解为java中的Maven,我们通过npm 可以很方便地下载js库，管理前端工程。}$<br>
  最近版本的node.js已经集成了npm工具，在命令提示符输入 npm -v 可查看当前npm版本。</p>
<h2 id="npm命令">NPM命令</h2>
<h3 id="初始化工程">初始化工程</h3>
<p>init命令是工程初始化命令。<br>
建立一个空文件夹，在命令提示符进入该文件夹  执行命令初始化</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm init
</code></pre></td></tr></table>
</div>
</div><p>按照提示输入相关信息，如果是用默认值则直接回车即可。</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">2
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">3
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">4
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-txt" data-lang="txt">name: 项目名称
version: 项目版本号
description: 项目描述
keywords: {Array}关键词，便于用户搜索到我们的项目
</code></pre></td></tr></table>
</div>
</div><p>$\color{red}{最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml}$<br>
我们之后也可以根据需要进行修改。</p>
<h3 id="本地安装">本地安装</h3>
<p>install命令用于安装某个模块，如果我们想安装express模块（node的web框架），输出命令如下：</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm install express
</code></pre></td></tr></table>
</div>
</div><p>  出现黄色的是警告信息，可以忽略，请放心，你已经成功执行了该命令。<br>
  在该目录下已经出现了一个node_modules文件夹 和package-lock.json<br>
  node_modules文件夹用于存放下载的js库（相当于maven的本地仓库）<br>
  package-lock.json是当 node_modules 或 package.json 发生变化时自动生成的文件。这个文件主要功能是确定当前安装的包的依赖，以便后续重新安装的时候生成相同的依赖，而忽略项目开发过程中有些依赖已经发生的更新。<br>
  我们再打开package.json文件，发现刚才下载的express已经添加到依赖列表中了。<br>
关于版本号定义：</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">2
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">3
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">4
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">5
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">6
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">7
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-txt" data-lang="txt">指定版本：比如1.2.2，遵循“大版本.次要版本.小版本”的格式规定，安装时只安装指定版本。

波浪号（tilde）+指定版本：比如~1.2.2，表示安装1.2.x的最新版本（不低于1.2.2），但是不安装1.3.x，也就是说安装时不改变大版本号和次要版本号。

插入号（caret）+指定版本：比如ˆ1.2.2，表示安装1.x.x的最新版本（不低于1.2.2），但是不安装2.x.x，也就是说安装时不改变大版本号。需要注意的是，如果大版本号为0，则插入号的行为与波浪号相同，这是因为此时处于开发阶段，即使是次要版本号变动，也可能带来程序的不兼容。

latest：安装最新版本。
</code></pre></td></tr></table>
</div>
</div><h3 id="全局安装">全局安装</h3>
<p>刚才我们使用的是本地安装，会将js库安装在当前目录，而使用全局安装会将库安装到你的全局目录下。<br>
如果你不知道你的全局目录在哪里，执行命令</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm root -g
</code></pre></td></tr></table>
</div>
</div><p>我的全局目录在</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-txt" data-lang="txt">C:\Users\it\AppData\Roaming\npm\node_modules
</code></pre></td></tr></table>
</div>
</div><p>比如我们全局安装jquery,  输入以下命令</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm install jquery -g
</code></pre></td></tr></table>
</div>
</div><h3 id="批量下载">批量下载</h3>
<p>我们从网上下载某些代码，发现只有package.json,没有node_modules文件夹，这时我们需要通过命令重新下载这些js库.<br>
进入目录（package.json所在的目录）输入命令</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm install
</code></pre></td></tr></table>
</div>
</div><p>此时，npm会自动下载package.json中依赖的js库.</p>
<h3 id="淘宝npm镜像">淘宝NPM镜像</h3>
<p>有时我们使用npm下载资源会很慢，所以我们可以安装一个cnmp(淘宝镜像)来加快下载速度。
输入命令，进行全局安装淘宝镜像。</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm install -g cnpm --registry<span style="color:#000;font-weight:bold">=</span>https://registry.npm.taobao.org
</code></pre></td></tr></table>
</div>
</div><p>安装后，我们可以使用以下命令来查看cnpm的版本</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">cnpm -v
</code></pre></td></tr></table>
</div>
</div><p>使用cnpm</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">cnpm install 需要下载的js库
</code></pre></td></tr></table>
</div>
</div><h3 id="运行工程">运行工程</h3>
<p>如果我们想运行某个工程，则使用run命令
如果package.json中定义的脚本如下</p>
<p>dev是开发阶段测试运行
build是构建编译工程
lint 是运行js代码检测 
我们现在来试一下运行dev</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm run dev
</code></pre></td></tr></table>
</div>
</div><h3 id="编译工程">编译工程</h3>
<p>我们接下来，测试一个代码的编译。编译后我们就可以将工程部署到nginx中啦~<br>
编译后的代码会放在dist文件夹中，首先我们先删除dist文件夹中的文件,进入命令提示符输入命令</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm run build
</code></pre></td></tr></table>
</div>
</div><p>  生成后我们会发现只有个静态页面，和一个static文件夹,这种工程我们称之为单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序,这里其实是调用了webpack来实现打包的，关于webpack我们后续的章节进行介绍</p>
<h2 id="什么是es6">什么是ES6</h2>
<p>  编程语言JavaScript是ECMAScript的实现和扩展 。ECMAScript是由ECMA（一个类似W3C的标准组织）参与进行标准化的语法规范。ECMAScript定义了：</p>
<p>[语言语法] – 语法解析规则、关键字、语句、声明、运算符等。
[类型]– 布尔型、数字、字符串、对象等。</p>
<p>[原型和继承]
内建对象和函数的
[标准库] – [JSON]、[Math]、[数组方法]、[对象自省方法]等。</p>
<p>ECMAScript标准不定义HTML或CSS的相关功能，也不定义类似DOM（文档对象模型）的[Web API]，这些都在独立的标准中进行定义。ECMAScript涵盖了各种环境中JS的使用场景，无论是浏览器环境还是类似[node.js]的非浏览器环境。</p>
<p>ECMAScript标准的历史版本分别是1、2、3、5。</p>
<p>那么为什么没有第4版？其实，在过去确实曾计划发布提出巨量新特性的第4版，但最终却因想法太过激进而惨遭废除（这一版标准中曾经有一个极其复杂的支持泛型和类型推断的内建静态类型系统）。</p>
<p>ES4饱受争议，当标准委员会最终停止开发ES4时，其成员同意发布一个相对谦和的ES5版本，随后继续制定一些更具实质性的新特性。这一明确的协商协议最终命名为“Harmony”，因此，ES5规范中包含这样两句话</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">2
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-txt" data-lang="txt">ECMAScript是一门充满活力的语言，并在不断进化中。
未来版本的规范中将持续进行重要的技术改进
</code></pre></td></tr></table>
</div>
</div><p>2009年发布的改进版本ES5，引入了[Object.create()]、[Object.defineProperty()]、[getters]和[setters]、[严格模式]以及[JSON]对象。</p>
<p>ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，2015年6月正式发布。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。</p>
<h3 id="nodejs使用es6">nodejs使用es6</h3>
<p>ES6+ 太棒了,但是很多高级功能node是不支持的,就需要使用babel转换成ES5<br>
（1）babel转换配置,项目根目录添加.babelrc 文件</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">2
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">3
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js">{
  <span style="color:#d14">&#34;presets&#34;</span> <span style="color:#000;font-weight:bold">:</span> [<span style="color:#d14">&#34;es2015&#34;</span>]
}
</code></pre></td></tr></table>
</div>
</div><p>（2）安装es6转换模块</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">cnpm install babel-preset-es2015 --save-dev
</code></pre></td></tr></table>
</div>
</div><p>（3）全局安装命令行工具</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">cnpm install  babel-cli -g
</code></pre></td></tr></table>
</div>
</div><p>（4）使用</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">babel-node    js的文件名
</code></pre></td></tr></table>
</div>
</div><h2 id="语法新特性">语法新特性</h2>
<h3 id="变量声明let">变量声明let</h3>
<p>我们都是知道在ES6以前，var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">2
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">3
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">4
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">5
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">6
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">7
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#000;font-weight:bold">function</span> aa(bool) {
    <span style="color:#000;font-weight:bold">if</span>(bool) {
        <span style="color:#000;font-weight:bold">var</span> test <span style="color:#000;font-weight:bold">=</span> <span style="color:#d14">&#39;hello man&#39;</span>
    } 
    console.log(test)
}
aa(<span style="color:#000;font-weight:bold">true</span>);
</code></pre></td></tr></table>
</div>
</div><p>以上的代码实际上是:</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">2
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">3
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">4
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">5
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">6
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">7
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">8
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#000;font-weight:bold">function</span> aa(bool) {
    <span style="color:#000;font-weight:bold">var</span> test <span style="color:#998;font-style:italic">// 变量提升
</span><span style="color:#998;font-style:italic"></span>    <span style="color:#000;font-weight:bold">if</span>(bool) {
        test <span style="color:#000;font-weight:bold">=</span> <span style="color:#d14">&#39;hello man&#39;</span>
    } 
console.log(test)
}
aa(<span style="color:#000;font-weight:bold">true</span>);
</code></pre></td></tr></table>
</div>
</div><p>所以不用关心bool是否为true or false。实际上，无论如何test都会被创建声明。</p>
<p>接下来ES6主角登场：</p>
<p>我们通常用let和const来声明，let表示变量、const表示常量。let和const都是块级作用域。怎么理解这个块级作用域？在一个函数内部 ，在一个代码块内部。看以下代码</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">2
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">3
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">4
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">5
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">6
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">7
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">8
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#000;font-weight:bold">function</span> aa(bool) {
    <span style="color:#000;font-weight:bold">if</span>(bool) {
       <span style="color:#000;font-weight:bold">let</span> test <span style="color:#000;font-weight:bold">=</span> <span style="color:#d14">&#39;hello man&#39;</span>
    }
    <span style="color:#998;font-style:italic">//test 在此处访问不到
</span><span style="color:#998;font-style:italic"></span>    console.log(test)
}
aa(<span style="color:#000;font-weight:bold">true</span>);
</code></pre></td></tr></table>
</div>
</div><h3 id="常量声明">常量声明</h3>
<p>const 用于声明常量，看以下代码</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">2
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#000;font-weight:bold">const</span> name <span style="color:#000;font-weight:bold">=</span> <span style="color:#d14">&#39;feifei&#39;</span>
name <span style="color:#000;font-weight:bold">=</span> <span style="color:#d14">&#39;yaya&#39;</span> <span style="color:#998;font-style:italic">//再次赋值此时会报错
</span></code></pre></td></tr></table>
</div>
</div><h3 id="模板字符串">模板字符串</h3>
<p>es6模板字符简直是开发者的福音啊，解决了ES5在字符串功能上的痛点。
第一个用途，基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">2
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">3
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">4
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">5
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">6
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#998;font-style:italic">//es5 
</span><span style="color:#998;font-style:italic"></span>	<span style="color:#000;font-weight:bold">var</span> name <span style="color:#000;font-weight:bold">=</span> <span style="color:#d14">&#39;feifei&#39;</span>
	console.log(<span style="color:#d14">&#39;hello&#39;</span> <span style="color:#000;font-weight:bold">+</span> name)
	<span style="color:#998;font-style:italic">//es6
</span><span style="color:#998;font-style:italic"></span>	<span style="color:#000;font-weight:bold">const</span> name2 <span style="color:#000;font-weight:bold">=</span> <span style="color:#d14">&#39;yaya&#39;</span>
	console.log(<span style="color:#d14">`hello </span><span style="color:#d14">${</span>name2<span style="color:#d14">}</span><span style="color:#d14">`</span>) <span style="color:#998;font-style:italic">//hello yaya    
</span></code></pre></td></tr></table>
</div>
</div><p>第二个用途，在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">2
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">3
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">4
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">5
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">6
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">7
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js">   	<span style="color:#998;font-style:italic">// es5
</span><span style="color:#998;font-style:italic"></span>    <span style="color:#000;font-weight:bold">var</span> msg <span style="color:#000;font-weight:bold">=</span> <span style="color:#d14">&#34;Hi \
</span><span style="color:#d14">    man!&#34;</span>
    <span style="color:#998;font-style:italic">// es6
</span><span style="color:#998;font-style:italic"></span>    <span style="color:#000;font-weight:bold">const</span> template <span style="color:#000;font-weight:bold">=</span> <span style="color:#d14">`&lt;div&gt;
</span><span style="color:#d14">        &lt;span&gt;hello world&lt;/span&gt;
</span><span style="color:#d14">    &lt;/div&gt;`</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="函数默认参数">函数默认参数</h3>
<p>ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。看例子代码</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">2
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">3
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">4
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">5
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js">   <span style="color:#000;font-weight:bold">function</span> action(num <span style="color:#000;font-weight:bold">=</span> <span style="color:#099">200</span>) {
        console.log(num)
    }
    action() <span style="color:#998;font-style:italic">//200
</span><span style="color:#998;font-style:italic"></span>    action(<span style="color:#099">300</span>) <span style="color:#998;font-style:italic">//300
</span></code></pre></td></tr></table>
</div>
</div><h3 id="箭头函数">箭头函数</h3>
<p>ES6很有意思的一部分就是函数的快捷写法。也就是箭头函数。</p>
<p>箭头函数最直观的三个特点。
1不需要function关键字来创建函数
2省略return关键字
3继承当前上下文的 this 关键字</p>
<p>看下面代码</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 1
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 2
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 3
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 4
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 5
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 6
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 7
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 8
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 9
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">10
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">11
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">12
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">13
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">14
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">15
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"> <span style="color:#998;font-style:italic">//ES5用法
</span><span style="color:#998;font-style:italic"></span>	<span style="color:#000;font-weight:bold">function</span> add(a,b){
	    <span style="color:#000;font-weight:bold">return</span> a<span style="color:#000;font-weight:bold">+</span>b;
	}
	console.log(add(<span style="color:#099">100</span>,<span style="color:#099">200</span>));
		
	<span style="color:#998;font-style:italic">//ES6用法
</span><span style="color:#998;font-style:italic"></span>	add2 <span style="color:#000;font-weight:bold">=</span> (a,b) =&gt; {
	    <span style="color:#000;font-weight:bold">return</span> a<span style="color:#000;font-weight:bold">+</span>b;
	}
	console.log(add2(<span style="color:#099">100</span>,<span style="color:#099">200</span>));
	
	<span style="color:#998;font-style:italic">//省略return关键字
</span><span style="color:#998;font-style:italic"></span>	add3 <span style="color:#000;font-weight:bold">=</span> (a,b) =&gt; a<span style="color:#000;font-weight:bold">+</span>b;
	console.log(add3(<span style="color:#099">100</span>,<span style="color:#099">200</span>));
</code></pre></td></tr></table>
</div>
</div><h3 id="对象初始化简写">对象初始化简写</h3>
<p>ES5我们对于对象都是以键值对的形式书写，是有可能出现键值对重名的。例如</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">2
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">3
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">4
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">5
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">6
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#000;font-weight:bold">function</span> people(name, age) {
        <span style="color:#000;font-weight:bold">return</span> {
            name<span style="color:#000;font-weight:bold">:</span> name,
            age<span style="color:#000;font-weight:bold">:</span> age
        };
    }
</code></pre></td></tr></table>
</div>
</div><p>以上代码可以简写为</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">2
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">3
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">4
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">5
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">6
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js">	<span style="color:#000;font-weight:bold">function</span> people(name, age) {
        <span style="color:#000;font-weight:bold">return</span> {
            name,
            age
        };
    }
</code></pre></td></tr></table>
</div>
</div><h3 id="解构">解构</h3>
<p>数组和对象是JS中最常用也是最重要表示形式。为了简化提取信息，ES6新增了解构，这是将一个数据结构分解为更小的部分的过程。
ES5我们提取对象中的信息形式如下</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">2
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">3
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">4
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">5
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">6
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">7
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#000;font-weight:bold">const</span> people <span style="color:#000;font-weight:bold">=</span> {
	        name<span style="color:#000;font-weight:bold">:</span> <span style="color:#d14">&#39;feifei&#39;</span>,
	        age<span style="color:#000;font-weight:bold">:</span> <span style="color:#099">20</span>
	    };
	<span style="color:#000;font-weight:bold">const</span> name <span style="color:#000;font-weight:bold">=</span> people.name;
	<span style="color:#000;font-weight:bold">const</span> age <span style="color:#000;font-weight:bold">=</span> people.age;
	console.log(name <span style="color:#000;font-weight:bold">+</span> <span style="color:#d14">&#39; --- &#39;</span> <span style="color:#000;font-weight:bold">+</span> age);
</code></pre></td></tr></table>
</div>
</div><p>是不是觉得很熟悉，没错，在ES6之前我们就是这样获取对象信息的，一个一个获取。现在，ES6的解构能让我们从对象或者数组里取出数据存为变量，例如</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 1
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 2
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 3
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 4
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 5
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 6
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 7
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 8
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 9
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">10
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">11
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">12
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#000;font-weight:bold">const</span> people <span style="color:#000;font-weight:bold">=</span> {
        name<span style="color:#000;font-weight:bold">:</span> <span style="color:#d14">&#39;feifei&#39;</span>,
        age<span style="color:#000;font-weight:bold">:</span> <span style="color:#099">20</span>
};
<span style="color:#998;font-style:italic">//大括号中的取值必须与对象中的属性名一致
</span><span style="color:#998;font-style:italic"></span>    <span style="color:#000;font-weight:bold">const</span> { name, age } <span style="color:#000;font-weight:bold">=</span> people;
    console.log(<span style="color:#d14">`</span><span style="color:#d14">${</span>name<span style="color:#d14">}</span><span style="color:#d14"> --- </span><span style="color:#d14">${</span>age<span style="color:#d14">}</span><span style="color:#d14">`</span>);
    <span style="color:#998;font-style:italic">//数组
</span><span style="color:#998;font-style:italic"></span>    <span style="color:#000;font-weight:bold">const</span> color <span style="color:#000;font-weight:bold">=</span> [<span style="color:#d14">&#39;red&#39;</span>, <span style="color:#d14">&#39;blue&#39;</span>];
    <span style="color:#000;font-weight:bold">const</span> [first, second] <span style="color:#000;font-weight:bold">=</span> color;
    console.log(first); <span style="color:#998;font-style:italic">//&#39;red&#39;
</span><span style="color:#998;font-style:italic"></span>    console.log(second); <span style="color:#998;font-style:italic">//&#39;blue&#39;
</span></code></pre></td></tr></table>
</div>
</div><h3 id="spread-operator">Spread Operator</h3>
<p>ES6中另外一个好玩的特性就是Spread Operator【传播操作符】，也是三个点儿&hellip;接下来就展示一下它的用途。 组装对象或者数组</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">2
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">3
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">4
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">5
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">6
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">7
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">8
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">9
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#998;font-style:italic">//数组
</span><span style="color:#998;font-style:italic"></span>    <span style="color:#000;font-weight:bold">const</span> color <span style="color:#000;font-weight:bold">=</span> [<span style="color:#d14">&#39;red&#39;</span>, <span style="color:#d14">&#39;yellow&#39;</span>]
    <span style="color:#000;font-weight:bold">const</span> colorful <span style="color:#000;font-weight:bold">=</span> [...color, <span style="color:#d14">&#39;green&#39;</span>, <span style="color:#d14">&#39;pink&#39;</span>]
    console.log(colorful) <span style="color:#998;font-style:italic">//[red, yellow, green, pink]
</span><span style="color:#998;font-style:italic"></span>    
    <span style="color:#998;font-style:italic">//对象
</span><span style="color:#998;font-style:italic"></span>    <span style="color:#000;font-weight:bold">const</span> alp <span style="color:#000;font-weight:bold">=</span> { fist<span style="color:#000;font-weight:bold">:</span> <span style="color:#d14">&#39;a&#39;</span>, second<span style="color:#000;font-weight:bold">:</span> <span style="color:#d14">&#39;b&#39;</span>}
    <span style="color:#000;font-weight:bold">const</span> alphabets <span style="color:#000;font-weight:bold">=</span> { ...alp, third<span style="color:#000;font-weight:bold">:</span> <span style="color:#d14">&#39;c&#39;</span> }
    console.log(alphabets) <span style="color:#998;font-style:italic">//{ &#34;fist&#34;: &#34;a&#34;, &#34;second&#34;: &#34;b&#34;, &#34;third&#34;: &#34;c&#34;
</span></code></pre></td></tr></table>
</div>
</div><h3 id="import-和-export">import 和 export</h3>
<p>import导入模块、export导出模块</p>
<p>lib.js</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">2
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">3
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">4
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#000;font-weight:bold">let</span> fn0<span style="color:#000;font-weight:bold">=</span><span style="color:#000;font-weight:bold">function</span>(){
	    console.log(<span style="color:#d14">&#39;fn0...&#39;</span>);
	}
	<span style="color:#000;font-weight:bold">export</span> {fn0}
</code></pre></td></tr></table>
</div>
</div><p>demo09.js</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">2
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#000;font-weight:bold">import</span> {fn0} from <span style="color:#d14">&#39;./lib&#39;</span>
	fn0();
</code></pre></td></tr></table>
</div>
</div><h2 id="什么是elementui">什么是ElementUI</h2>
<p>我们的十次方管理后台就采用ElementUI来进行搭建。
Element 饿了么前端出品的一套 Vue.js 后台组件库
官网： <a href="http://element-cn.eleme.io/#/zh-CN">http://element-cn.eleme.io/#/zh-CN</a>
<img src="/img/%E9%A5%BF%E4%BA%86%E4%B9%88%E7%BD%91%E7%AB%99.png" alt="alt 饿了么网站"></p>
<h3 id="快速搭建">快速搭建</h3>
<ol>
<li>在命令提示符进入该目录，输入命令：</li>
</ol>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">cnpm install
</code></pre></td></tr></table>
</div>
</div><p>这样下载安装所有的依赖，几分钟后下载完成。
3. 输入命令：</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm run dev
</code></pre></td></tr></table>
</div>
</div><p>运行后自动弹出浏览器。</p>
<h2 id="了解工程结构">了解工程结构</h2>
<p>以下是主要的目录结构：
<img src="/img/%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84.png" alt="alt 项目结构">
<img src="/img/%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%841.png" alt="alt 项目结构1"></p>
<h2 id="项目初始化">项目初始化</h2>
<h3 id="关闭语法规范性检查">关闭语法规范性检查</h3>
<p>修改config/index.js ，将useEslint的值改为false。</p>
<p>此配置作用:  是否开启语法检查，语法检查是通过ESLint 来实现的。</p>
<p>我们现在科普一下,什么是ESLint :   ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。如果我们开启了Eslint , 也就意味着要接受它非常苛刻的语法检查，包括空格不能少些或多些，必须单引不能双引，语句后不可以写分号等等，这些规则其实是可以设置的。我们作为前端的初学者，最好先关闭这种校验，否则会浪费很多精力在语法的规范性上。如果以后做真正的企业级开发，建议开启。</p>
<h3 id="国际化设置">国际化设置</h3>
<p>打开/src/main.js  找到这句代码</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-txt" data-lang="txt">import locale from &#39;element-ui/lib/locale/lang/en&#39;
</code></pre></td></tr></table>
</div>
</div><p>我们将en修改为zn-CN</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-txt" data-lang="txt">import locale from &#39;element-ui/lib/locale/lang/zh-CN&#39;
</code></pre></td></tr></table>
</div>
</div><p>修改后组件都是按照中文的习惯展示</p>
<h3 id="与easy-mock对接">与easy-mock对接</h3>
<ol>
<li>修改config下的dev.env.js中的BASE_API为easy-mock的Base URL</li>
</ol>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-txt" data-lang="txt">    BASE_API: &#39;&#34;http://192.168.207.131:7300/mock/5af314a4c612520d0d7650c7&#34;&#39;,
</code></pre></td></tr></table>
</div>
</div><ol start="2">
<li>easy-mock添加登陆认证模拟数据</li>
</ol>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">2
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">3
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">4
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">5
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">6
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">7
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">8
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">9
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-txt" data-lang="txt">地址： /user/login
提交方式：post
内容：
    {
      &#34;code&#34;: 20000,
      &#34;data&#34;: {
        &#34;token&#34;: &#34;admin&#34;
      }
    }
</code></pre></td></tr></table>
</div>
</div><ol start="3">
<li>添加返回用户信息url模拟数据</li>
</ol>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 1
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 2
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 3
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 4
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 5
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 6
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 7
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 8
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 9
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">10
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">11
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">12
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-txt" data-lang="txt">地址：/user/info
提交方式：get
内容：
{
  &#34;code&#34;: 20000,
  &#34;data&#34;: {
    &#34;roles&#34;: [&#34;admin&#34;],
    &#34;role&#34;: [&#34;admin&#34;],
    &#34;name&#34;: &#34;admin&#34;,
    &#34;avatar&#34;: &#34;https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif&#34;
  }
}
</code></pre></td></tr></table>
</div>
</div><h3 id="更改标题与菜单">更改标题与菜单</h3>
<ol>
<li>修改index.html里的标题为&quot;十次方后台管理系统&rdquo;，修改后浏览器自动刷新。这就是脚手架中已经为我们添加了热部署功能。</li>
<li>修改src/router 下的index.js 中constantRouterMap的内容</li>
</ol>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 1
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 2
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 3
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 4
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 5
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 6
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 7
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 8
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 9
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">10
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">11
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">12
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">13
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">14
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">15
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">16
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">17
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">18
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">19
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">20
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">21
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">22
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">23
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">24
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">25
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">26
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">27
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">28
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">29
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">30
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">31
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">32
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">33
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">34
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">35
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">36
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">37
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">38
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">39
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">40
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">41
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">42
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">43
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">44
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">45
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">46
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">47
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">48
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">49
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">50
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">51
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#000;font-weight:bold">export</span> <span style="color:#000;font-weight:bold">const</span> constantRouterMap <span style="color:#000;font-weight:bold">=</span> [
    { path<span style="color:#000;font-weight:bold">:</span> <span style="color:#d14">&#39;/login&#39;</span>, component<span style="color:#000;font-weight:bold">:</span> () =&gt; <span style="color:#000;font-weight:bold">import</span>(<span style="color:#d14">&#39;@/views/login/index&#39;</span>), hidden<span style="color:#000;font-weight:bold">:</span> <span style="color:#000;font-weight:bold">true</span> },
    { path<span style="color:#000;font-weight:bold">:</span> <span style="color:#d14">&#39;/404&#39;</span>, component<span style="color:#000;font-weight:bold">:</span> () =&gt; <span style="color:#000;font-weight:bold">import</span>(<span style="color:#d14">&#39;@/views/404&#39;</span>), hidden<span style="color:#000;font-weight:bold">:</span> <span style="color:#000;font-weight:bold">true</span> },
    {
      path<span style="color:#000;font-weight:bold">:</span> <span style="color:#d14">&#39;/&#39;</span>,
      component<span style="color:#000;font-weight:bold">:</span> Layout,
      redirect<span style="color:#000;font-weight:bold">:</span> <span style="color:#d14">&#39;/dashboard&#39;</span>,
      name<span style="color:#000;font-weight:bold">:</span> <span style="color:#d14">&#39;Dashboard&#39;</span>,
      hidden<span style="color:#000;font-weight:bold">:</span> <span style="color:#000;font-weight:bold">true</span>,
      children<span style="color:#000;font-weight:bold">:</span> [{
        path<span style="color:#000;font-weight:bold">:</span> <span style="color:#d14">&#39;dashboard&#39;</span>,
        component<span style="color:#000;font-weight:bold">:</span> () =&gt; <span style="color:#000;font-weight:bold">import</span>(<span style="color:#d14">&#39;@/views/dashboard/index&#39;</span>)
      }]
    },
    {
      path<span style="color:#000;font-weight:bold">:</span> <span style="color:#d14">&#39;/example&#39;</span>,
      component<span style="color:#000;font-weight:bold">:</span> Layout,
      redirect<span style="color:#000;font-weight:bold">:</span> <span style="color:#d14">&#39;/example/table&#39;</span>,
      name<span style="color:#000;font-weight:bold">:</span> <span style="color:#d14">&#39;Example&#39;</span>,
      meta<span style="color:#000;font-weight:bold">:</span> { title<span style="color:#000;font-weight:bold">:</span> <span style="color:#d14">&#39;基本信息管理&#39;</span>, icon<span style="color:#000;font-weight:bold">:</span> <span style="color:#d14">&#39;example&#39;</span> },
      children<span style="color:#000;font-weight:bold">:</span> [
        {
          path<span style="color:#000;font-weight:bold">:</span> <span style="color:#d14">&#39;table&#39;</span>,
          name<span style="color:#000;font-weight:bold">:</span> <span style="color:#d14">&#39;Table&#39;</span>,
          component<span style="color:#000;font-weight:bold">:</span> () =&gt; <span style="color:#000;font-weight:bold">import</span>(<span style="color:#d14">&#39;@/views/table/index&#39;</span>),
          meta<span style="color:#000;font-weight:bold">:</span> { title<span style="color:#000;font-weight:bold">:</span> <span style="color:#d14">&#39;城市管理&#39;</span>, icon<span style="color:#000;font-weight:bold">:</span> <span style="color:#d14">&#39;table&#39;</span> }
        },
        {
          path<span style="color:#000;font-weight:bold">:</span> <span style="color:#d14">&#39;tree&#39;</span>,
          name<span style="color:#000;font-weight:bold">:</span> <span style="color:#d14">&#39;Tree&#39;</span>,
          component<span style="color:#000;font-weight:bold">:</span> () =&gt; <span style="color:#000;font-weight:bold">import</span>(<span style="color:#d14">&#39;@/views/tree/index&#39;</span>),
          meta<span style="color:#000;font-weight:bold">:</span> { title<span style="color:#000;font-weight:bold">:</span> <span style="color:#d14">&#39;标签管理&#39;</span>, icon<span style="color:#000;font-weight:bold">:</span> <span style="color:#d14">&#39;tree&#39;</span> }
        }
      ]
    },
    {
      path<span style="color:#000;font-weight:bold">:</span> <span style="color:#d14">&#39;/form&#39;</span>,
      component<span style="color:#000;font-weight:bold">:</span> Layout,
      name<span style="color:#000;font-weight:bold">:</span> <span style="color:#d14">&#39;Example2&#39;</span>,
      meta<span style="color:#000;font-weight:bold">:</span> { title<span style="color:#000;font-weight:bold">:</span> <span style="color:#d14">&#39;活动管理&#39;</span>, icon<span style="color:#000;font-weight:bold">:</span> <span style="color:#d14">&#39;example&#39;</span> },
      children<span style="color:#000;font-weight:bold">:</span> [
        {
          path<span style="color:#000;font-weight:bold">:</span> <span style="color:#d14">&#39;index&#39;</span>,
          name<span style="color:#000;font-weight:bold">:</span> <span style="color:#d14">&#39;Form&#39;</span>,
          component<span style="color:#000;font-weight:bold">:</span> () =&gt; <span style="color:#000;font-weight:bold">import</span>(<span style="color:#d14">&#39;@/views/form/index&#39;</span>),
          meta<span style="color:#000;font-weight:bold">:</span> { title<span style="color:#000;font-weight:bold">:</span> <span style="color:#d14">&#39;活动管理&#39;</span>, icon<span style="color:#000;font-weight:bold">:</span> <span style="color:#d14">&#39;form&#39;</span> }
        }
      ]
    },
    { path<span style="color:#000;font-weight:bold">:</span> <span style="color:#d14">&#39;*&#39;</span>, redirect<span style="color:#000;font-weight:bold">:</span> <span style="color:#d14">&#39;/404&#39;</span>, hidden<span style="color:#000;font-weight:bold">:</span> <span style="color:#000;font-weight:bold">true</span> }
  ]
</code></pre></td></tr></table>
</div>
</div>
        </div>

        
<div class="post-archive">
    <ul class="post-copyright">
        <li><strong>原文作者：</strong><a rel="author" href="https://laoer123.gitee.io/laoer123">Jeremy Sze</a></li>
        <li style="word-break:break-all"><strong>原文链接：</strong><a href="https://laoer123.gitee.io/laoer123/post/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E4%B9%8B%E5%89%8D%E7%AB%AF%E6%80%BB%E7%BB%93/">https://laoer123.gitee.io/laoer123/post/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E4%B9%8B%E5%89%8D%E7%AB%AF%E6%80%BB%E7%BB%93/</a></li>
        <li><strong>版权声明：</strong>本作品采用<a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/">知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议</a>进行许可，非商业转载请注明出处（作者，原文链接），商业转载请联系作者获得授权。</li>
    </ul>
</div>
<br/>



        

<div class="post-archive">
    <h2>See Also</h2>
    <ul class="listing">
        
        <li><a href="/laoer123/post/Dockerfile%E6%9E%84%E5%BB%BA%E6%9C%8D%E5%8A%A1%E9%95%9C%E5%83%8F%E6%80%BB%E7%BB%93/">Dockerfile构建服务镜像_gogs搭建git_Jenkins持续集成总结</a></li>
        
        <li><a href="/laoer123/post/springcloud_hystrix_zuul_springcloudconfig_springcloudbus/">springcloud_hystrix_zuul_springcloudconfig_springcloudbus总结</a></li>
        
        <li><a href="/laoer123/post/JPQL%E5%BC%80%E5%8F%91%E5%B0%8F%E6%8F%90%E7%A4%BA/">JPQL注意点</a></li>
        
        <li><a href="/laoer123/post/SpringCloud_Eureka_Feign/">SpringCloud_Eureka_Feign总结</a></li>
        
        <li><a href="/laoer123/post/JWT%E6%80%BB%E7%BB%93/">JWT总结</a></li>
        
    </ul>
</div>


        <div class="post-meta meta-tags">
            
            <ul class="clearfix">
                
                <li><a href='https://laoer123.gitee.io/tags/nodeJS'>nodeJS</a></li>
                
                <li><a href='https://laoer123.gitee.io/tags/npm'>npm</a></li>
                
                <li><a href='https://laoer123.gitee.io/tags/ElementUI'>ElementUI</a></li>
                
                <li><a href='https://laoer123.gitee.io/tags/ES6'>ES6</a></li>
                
            </ul>
            
        </div>
    </article>
    
    <div id="disqus_thread"></div>
<script type="application/javascript">
    var disqus_config = function () {
    
    
    
    };
    (function() {
        if (["localhost", "127.0.0.1"].indexOf(window.location.hostname) != -1) {
            document.getElementById('disqus_thread').innerHTML = 'Disqus comments not available by default when the website is previewed locally.';
            return;
        }
        var d = document, s = d.createElement('script'); s.async = true;
        s.src = '//' + "yourdiscussshortname" + '.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="https://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

    
    
</div>

                </div>

                <div id="secondary">
    <section class="widget">
        <form id="search" action='https://laoer123.gitee.io/laoer123/search/' method="get" accept-charset="utf-8" target="_blank" _lpchecked="1">
      
      <input type="text" name="q" maxlength="20" placeholder="Search">
      <input type="hidden" name="sitesearch" value="https://laoer123.gitee.io/laoer123">
      <button type="submit" class="submit icon-search"></button>
</form>
    </section>
    
    <section class="widget">
        <h3 class="widget-title">最近文章</h3>
<ul class="widget-list">
    
    <li>
        <a href="https://laoer123.gitee.io/laoer123/post/springcloud%E4%B8%8EspringcloudAlibaba%E6%80%BB%E7%BB%93/" title="springcloud与springcloudAlibaba总结">springcloud与springcloudAlibaba总结</a>
    </li>
    
    <li>
        <a href="https://laoer123.gitee.io/laoer123/post/Seata%E6%80%BB%E7%BB%93/" title="Seata总结">Seata总结</a>
    </li>
    
    <li>
        <a href="https://laoer123.gitee.io/laoer123/post/OpenFegin%E6%80%BB%E7%BB%93/" title="OpenFegin总结">OpenFegin总结</a>
    </li>
    
    <li>
        <a href="https://laoer123.gitee.io/laoer123/post/SpringCloudGateWay%E6%80%BB%E7%BB%93/" title="SpringCloudGateWay总结">SpringCloudGateWay总结</a>
    </li>
    
    <li>
        <a href="https://laoer123.gitee.io/laoer123/post/SpringCloudRibbon/" title="SpringCloudRibbon总结">SpringCloudRibbon总结</a>
    </li>
    
    <li>
        <a href="https://laoer123.gitee.io/laoer123/post/Nacos%E9%85%8D%E7%BD%AE%E6%B3%A8%E5%86%8C%E4%B8%8E%E5%8F%91%E7%8E%B0/" title="Nacos配置注册与发现">Nacos配置注册与发现</a>
    </li>
    
    <li>
        <a href="https://laoer123.gitee.io/laoer123/post/Nacos%E9%85%8D%E7%BD%AE%E7%AE%A1%E7%90%86%E6%BC%94%E7%A4%BA/" title="Nacos配置管理演示">Nacos配置管理演示</a>
    </li>
    
    <li>
        <a href="https://laoer123.gitee.io/laoer123/post/Nacos%E6%80%BB%E7%BB%93/" title="什么是Nacos">什么是Nacos</a>
    </li>
    
    <li>
        <a href="https://laoer123.gitee.io/laoer123/post/Sentinel%E6%96%B0%E6%89%8B%E6%8C%87%E5%8D%97/" title="Sentinel新手指南">Sentinel新手指南</a>
    </li>
    
    <li>
        <a href="https://laoer123.gitee.io/laoer123/post/Sentinel%E6%8E%A7%E5%88%B6%E5%8F%B0/" title="Sentinel控制台">Sentinel控制台</a>
    </li>
    
</ul>
    </section>

    

    <section class="widget">
        <h3 class="widget-title">分类</h3>
<ul class="widget-list">
    
    <li><a href="https://laoer123.gitee.io/laoer123/categories/Linux/">Linux (2)</a></li>
    
    <li><a href="https://laoer123.gitee.io/laoer123/categories/NoSql%E6%95%B0%E6%8D%AE%E5%BA%93/">NoSql数据库 (1)</a></li>
    
    <li><a href="https://laoer123.gitee.io/laoer123/categories/SpringCloud/">SpringCloud (2)</a></li>
    
    <li><a href="https://laoer123.gitee.io/laoer123/categories/SpringCloudAlibaba/">SpringCloudAlibaba (11)</a></li>
    
    <li><a href="https://laoer123.gitee.io/laoer123/categories/SpringCloudAlibabaSpringCloud/">SpringCloudAlibaba,SpringCloud (1)</a></li>
    
    <li><a href="https://laoer123.gitee.io/laoer123/categories/docker/">docker (2)</a></li>
    
    <li><a href="https://laoer123.gitee.io/laoer123/categories/java%E5%9F%BA%E7%A1%80/">java基础 (10)</a></li>
    
    <li><a href="https://laoer123.gitee.io/laoer123/categories/spring/">spring (4)</a></li>
    
    <li><a href="https://laoer123.gitee.io/laoer123/categories/%E4%BA%8B%E5%8A%A1/">事务 (1)</a></li>
    
    <li><a href="https://laoer123.gitee.io/laoer123/categories/%E5%88%86%E5%B8%83%E5%BC%8F/">分布式 (1)</a></li>
    
    <li><a href="https://laoer123.gitee.io/laoer123/categories/%E5%89%8D%E7%AB%AF%E5%BE%AE%E6%9C%8D%E5%8A%A1/">前端微服务 (1)</a></li>
    
    <li><a href="https://laoer123.gitee.io/laoer123/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/">前端框架 (2)</a></li>
    
    <li><a href="https://laoer123.gitee.io/laoer123/categories/%E6%8C%81%E7%BB%AD%E9%9B%86%E6%88%90/">持续集成 (1)</a></li>
    
    <li><a href="https://laoer123.gitee.io/laoer123/categories/%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E/">搜索引擎 (1)</a></li>
    
    <li><a href="https://laoer123.gitee.io/laoer123/categories/%E6%95%B0%E6%8D%AE%E5%B1%82%E6%A1%86%E6%9E%B6/">数据层框架 (1)</a></li>
    
    <li><a href="https://laoer123.gitee.io/laoer123/categories/%E6%95%B0%E6%8D%AE%E5%BA%93/">数据库 (5)</a></li>
    
    <li><a href="https://laoer123.gitee.io/laoer123/categories/%E6%9C%8D%E5%8A%A1%E5%99%A8/">服务器 (1)</a></li>
    
    <li><a href="https://laoer123.gitee.io/laoer123/categories/%E6%9E%B6%E6%9E%84/">架构 (1)</a></li>
    
    <li><a href="https://laoer123.gitee.io/laoer123/categories/%E6%B6%88%E6%81%AF%E4%B8%AD%E9%97%B4%E4%BB%B6/">消息中间件 (1)</a></li>
    
    <li><a href="https://laoer123.gitee.io/laoer123/categories/%E7%89%88%E6%9C%AC%E6%8E%A7%E5%88%B6/">版本控制 (1)</a></li>
    
    <li><a href="https://laoer123.gitee.io/laoer123/categories/%E7%BC%93%E5%AD%98/">缓存 (1)</a></li>
    
    <li><a href="https://laoer123.gitee.io/laoer123/categories/%E8%AE%A4%E8%AF%81/">认证 (2)</a></li>
    
    <li><a href="https://laoer123.gitee.io/laoer123/categories/%E8%BF%90%E7%BB%B4/">运维 (1)</a></li>
    
    <li><a href="https://laoer123.gitee.io/laoer123/categories/%E9%83%A8%E7%BD%B2/">部署 (1)</a></li>
    
</ul>
    </section>

    <section class="widget">
        <h3 class="widget-title">标签</h3>
<div class="tagcloud">
    
    <a href="https://laoer123.gitee.io/laoer123/tags/Dubbo/">Dubbo</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/ES6/">ES6</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/ElasticSearch/">ElasticSearch</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/ElementUI/">ElementUI</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/Eureka/">Eureka</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/Feign/">Feign</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/JDBCTemplate/">JDBCTemplate</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/JPA/">JPA</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/JWT/">JWT</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/Jenkins/">Jenkins</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/Linux%E5%9F%BA%E7%A1%80/">Linux基础</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/Linux%E9%85%8D%E7%BD%AE%E8%81%94%E7%BD%91/">Linux配置联网</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/MongoDB/">MongoDB</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/Nacos/">Nacos</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/ORACLE/">ORACLE</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/OpenFegin/">OpenFegin</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/RabbitMQ/">RabbitMQ</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/Seata/">Seata</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/Sentinel/">Sentinel</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/SpringCloudGateWay/">SpringCloudGateWay</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/SpringCloudRibbon/">SpringCloudRibbon</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/SpringCloudSpringCloudAlibaba/">SpringCloud,SpringCloudAlibaba</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/VUE/">VUE</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/docker/">docker</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/git/">git</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/gogs/">gogs</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/hystrix/">hystrix</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/mysql/">mysql</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/nginx/">nginx</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/nodeJS/">nodeJS</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/npm/">npm</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/springCache/">springCache</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/springDataJPA/">springDataJPA</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/springboot/">springboot</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/springcloudbus/">springcloudbus</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/springcloudconfig/">springcloudconfig</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/springdataredis/">springdataredis</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/zuul/">zuul</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/%E5%88%86%E5%B8%83%E5%BC%8F/">分布式</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/%E5%88%86%E5%B8%83%E5%BC%8F%E4%BA%8B%E5%8A%A1/">分布式事务</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/%E5%88%9B%E5%BB%BA%E6%A8%A1%E5%BC%8F/">创建模式</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/%E5%BE%AE%E6%9C%8D%E5%8A%A1/">微服务</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/%E6%8E%92%E5%BA%8F/">排序</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/%E6%9C%8D%E5%8A%A1%E9%95%9C%E5%83%8F%E7%9A%84%E6%9E%84%E5%BB%BA%E4%B8%8E%E9%83%A8%E7%BD%B2/">服务镜像的构建与部署</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/%E7%BB%93%E6%9E%84%E6%A8%A1%E5%BC%8F/">结构模式</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/%E8%A1%8C%E4%B8%BA%E6%A8%A1%E5%BC%8F/">行为模式</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/">设计模式</a>
    
    <a href="https://laoer123.gitee.io/laoer123/tags/%E8%BF%90%E7%BB%B4/">运维</a>
    
</div>
    </section>

    
<section class="widget">
    <h3 class="widget-title">友情链接</h3>
    <ul class="widget-list">
        
        <li>
            <a target="_blank" href="https://www.cnblogs.com/Jeremy95-Sze/" title="Jeremy Sze的博客">Jeremy Sze的博客</a>
        </li>
        
        <li>
            <a target="_blank" href="https://github.com/Jeremy95-Sze" title="Jeremy Sze的github">Jeremy Sze的github</a>
        </li>
        
    </ul>
</section>


    <section class="widget">
        <h3 class="widget-title">其它</h3>
        <ul class="widget-list">
            <li><a href="https://laoer123.gitee.io/laoer123/index.xml">文章 RSS</a></li>
        </ul>
    </section>
</div>
            </div>
        </div>
    </div>
    <footer id="footer">
    <div class="container">
        &copy; 2023 <a href="https://laoer123.gitee.io/laoer123">Jeremy Sze的博客 By Jeremy Sze</a>.
        Powered by <a rel="nofollow noreferer noopener" href="https://gohugo.io" target="_blank">Hugo</a>.
        <a href="https://www.flysnow.org/" target="_blank">Theme</a> based on <a href="https://github.com/flysnow-org/maupassant-hugo" target="_blank">maupassant</a>.
        
    </div>
</footer>


    
    <script src="//cdnjs.cloudflare.com/ajax/libs/webfont/1.6.28/webfontloader.js" crossorigin="anonymous"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js" crossorigin="anonymous"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js" crossorigin="anonymous"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/js-sequence-diagrams/1.0.6/sequence-diagram-min.js" crossorigin="anonymous"></script>
        <script>(function () {
            if (!window.Diagram) return;
            const blocks = document.querySelectorAll('pre code.language-sequence');
            for (let i = 0; i < blocks.length; i++) {
                const block = blocks[i];
                
                const rootElement = block.parentNode;
                const container = document.createElement('div');
                const id = `js-sequence-diag-${i}`;
                container.id = id;
                container.className = 'align-center';
                container.setAttribute("style", "overFlow-x:auto");
                rootElement.parentNode.replaceChild(container, rootElement);

                const diagram = Diagram.parse(block.childNodes[0].nodeValue);
                diagram.drawSVG(id, window.sequenceDiagramsOptions
                    ? window.sequenceDiagramsOptions
                    : { theme: 'simple' });
            }
        })();
        </script><script type="text/javascript">
        window.MathJax = {
            tex2jax: {
                inlineMath: [['$', '$']],
                processEscapes: true
                }
            };
    </script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML' async></script>


<a id="rocket" href="#top"></a>
<script type="text/javascript" src='/laoer123/js/totop.js?v=0.0.0' async=""></script>

<script type="application/javascript">
var doNotTrack = false;
if (!doNotTrack) {
	window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
	ga('create', 'GA ID', 'auto');
	
	ga('send', 'pageview');
}
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>



    <script type="text/javascript" src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" async></script>




    <script src='/laoer123/js/douban.js'></script>

</body>

</html>